<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%
	String path = request.getContextPath();
%>

<html>
<head>


<title>Order Detail</title>

<link href="<%=path%>/static/css/main_jxc.css" rel="stylesheet"
	type="text/css" />
<!--  
<link rel="alternate stylesheet" type="text/css"
	href="<%=path%>/static/css/1024.css" title="1024 x 768" />
-->
<link rel="stylesheet" type="text/css"
	href="<%=path%>/static/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/static/css/themes/icon.css">

<script src="<%=path%>/static/js/jquery-1.6.1.min.js"
	type="text/javascript"></script>

<script src="<spring:url value="/static/js/jquery.easyui.min.js" />"
	type="text/javascript"></script>

<script>
	window.onload = function() {
		var _mask = parent.document.getElementById('idDivWait');
		_mask.parentNode.removeChild(_mask);
	}
	
	function save(saveFlag){
		//parent.$('#idDetailView').window('close');
		
		$("input[name='saveFlag']").attr("value",saveFlag);
		$("input[id]").each(function (){  
			$(this).val($(this).val()+"#"+$(this).attr("id"));
		 });
		
		$.ajax({
	           type: "POST",
	           url: "autoCloseActivity",
	           data: $("#form2").serialize(), // serializes the form's elements.
	           success: function(data)
	           {
	        	   if("success" == data) {  
	        		   $.messager.alert("Message","Execute success.","info",function () {
	        			   parent.$('#idDetailView').window('close');
	        			   window.parent.$('#orderListTable').datagrid('reload');
	        		   });
	        		
	             	   //location.reload();	             	 
	               }else if("null" == data) {  
	            	   $.messager.alert("Message","Site doesn't exist, please create site.","info",function () {
	            		   parent.$('#idDetailView').window('close');
	            	   });
	               }else if("failure" == data) {  
	            	   $.messager.alert("Message","Execute failure.");
	               }  
	           },
	           error: function(request) {
	        	   $.messager.alert("Message","Execute error.");
               }
	         });

	    return false; // avoid to execute the actual submit of the form.
	}
	
	$.fn.datebox.defaults.formatter = function(date) {
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		var d = date.getDate();
		return (d < 10 ? '0' + d : d) + '/' + (m < 10 ? '0' + m : m) + '/' + y;
	};

	$.fn.datebox.defaults.parser = function(s) {
		if (s) {
			var a = s.split('/');
			var d = new Number(a[0]);
			var m = new Number(a[1]);
			var y = new Number(a[2]);
			var dd = new Date(y, m-1, d);
			return dd;
		} else {
			return new Date();
		}
	};
	
	jQuery(function($){
		$("body div.combo-p div.combo-panel").each(function(i,ele){
			var count = $("div.combobox-item",$(this)).size();
			if( count >8){
				$(this).panel("resize",{height:200});
			}
		});
	});
	
</script>


</head>
<body class="easyui-layout" data-options="fit:true,border :false">

	<div class="easyui-tabs" style="width: 740px; height: 400px;">
		<!-- setheight -->

		<!-- order detail view -->
		<div title="Order" style="padding: 10px;">
			<div id="tabs" data-options="fit : true"></div>

			<c:if
				test="${iboWorkOrderDTO.ORDER_STATE ne 'PROVISIONING COMPLETE' && iboWorkOrderDTO.ORDER_STATE ne ''}">
				<span style="display: inline-block;">					
					<input type="button" value="SaveClose" onclick="save('true')">
				</span>
				<span style="display: inline-block;">
					<form name="form1" id="form1" method="get"
						action="manualCloseActivity">
						<input type="hidden" name="itemid"
							value="${iboWorkOrderDTO.object_ID}"> <input
							type="hidden" name="orderId"
							value="${iboWorkOrderDTO.sales_ORDER_ID}"> <input
							type="hidden" name="serviceOrderId"
							value="${iboWorkOrderDTO.service_ORDER_ID}"> <input
							type="submit" value="Manual">
					</form> </span>
				<span style="display: inline-block;">					
					<input type="button" value="Save" onclick="save('false')">
				</span>	
			</c:if>
			<!-- Table Start -->
			<c:if
				test="${iboWorkOrderAttrsDTOList != null || fn:length(iboWorkOrderAttrsDTOList) > 0}">
				<div class="panel datagrid" style="width: 700px;">
					<div class="panel-header">
						<div class="panel-title">Attributes Table</div>
					</div>


					<div title="Datagrid panel" style="width: 700px;">

						<div class="datagrid-wrap panel-body">
							<table class="datagrid-header"
								style="height: 25px; border-color: #95b8e7;" cellspacing="0"
								cellpadding="0">
								<tbody>
									<tr class="datagrid-header-row">
										<td rowspan="1" colspan="1" field="itemid">
											<div class="datagrid-cell datagrid-cell-c1-attrname">
												<span>Name</span>
											</div>
										</td>
										<td rowspan="1" colspan="1" field="productid"><div
												class="datagrid-cell datagrid-cell-c1-attrvalue">
												<span>Value</span>
											</div></td>
									</tr>

								</tbody>
							</table>

							<form name="form2" id="form2">
							<table class="datagrid-body" cellspacing="0" cellpadding="0">

								<tbody>

									<c:forEach var="attrs" items="${iboWorkOrderAttrsDTOList}">
										<c:choose>
										<c:when test="${attrs.attrName == 'EDITABLE_ATTRIBUTE' }">
											<!--<c:set var="attrValue" value="${fn:split(attrs.attrValue, '|')}" />-->
											<tr class="datagrid-row">
											<td field="attrName">
												<div class="datagrid-cell datagrid-cell-c1-attrname"
													style="height: auto;">${attrs.editableAttrValue.displayName}</div>											
											</td>
											<td field="attrValue">
												<c:choose>
													<c:when test="${attrs.editableAttrValue.editable == 'TRUE' && attrs.editableAttrValue.componentType == 'COMBOBOX' }">
														<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
														<input name="${attrs.editableAttrValue.variableName}" class="easyui-combobox" style="width:200px" data-options="
																		valueField: 'label',
																		textField: 'value',																
																		data: ${attrs.editableAttrValue.defaultValue},
																		panelHeight:'auto',
																		onLoadSuccess: function(data) {																																                
														                    if (data.length > 0 && $(this).val() =='') {
														                        $(this).combobox('select', data[0].label);
														                    }													                
														            	}" value="${attrs.attrValue}"/>
														</div>
													</c:when>
													<c:when test="${attrs.editableAttrValue.editable == 'TRUE' && attrs.editableAttrValue.componentType == 'AJAXCOMBOBOX' }">
														<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
														<input name="${attrs.editableAttrValue.variableName}" class="easyui-combobox" style="width:200px" data-options="
																		valueField: 'label',
																		textField: 'value',											
																		url: '${attrs.editableAttrValue.defaultValue}'" value="${attrs.attrValue}" />
														</div>
													</c:when>
													<c:when test="${attrs.editableAttrValue.editable == 'TRUE' && attrs.editableAttrValue.componentType == 'TEXTBOX' }">
														<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
														<input name="${attrs.editableAttrValue.variableName}" class="easyui-textbox" style="width:200px" value="${attrs.attrValue}">
														</div>
													</c:when>
													<c:when test="${attrs.editableAttrValue.editable == 'TRUE' && attrs.editableAttrValue.componentType == 'DATEBOX' }">
														<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
														<input name="${attrs.editableAttrValue.variableName}" type="text" class="easyui-datebox" style="width:200px" required="required" value="${attrs.attrValue}">												
														</div>
													</c:when>
													<c:when test="${attrs.editableAttrValue.editable == 'TRUE' && attrs.editableAttrValue.valueSource == 'GRID' }">
														<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
														<input name="${attrs.editableAttrValue.variableName}" class="easyui-textbox" id="${attrs.rowNum}#${attrs.editableAttrValue.displayName}"  style="width:200px" value="${attrs.attrValue}">
														</div>
													</c:when>
													<c:when test="${attrs.editableAttrValue.displayName == 'COMMENTS' }">
															<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
																<c:if test="${!empty attrs.attrValue}">
																<a name="login" href=${attrs.attrValue } target="_blank">Click
																	here to view Comments</a>
																	</c:if>
															</div>
														</c:when>
														<c:when test="${attrs.editableAttrValue.displayName == 'ATTACHMENT' }">
															<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
																<c:if test="${!empty attrs.attrValue}">
																<a name="login" href=${attrs.attrValue } target="_blank">Click
																	here to download Attachment</a>
																	</c:if>
															</div>
														</c:when>
													<c:otherwise>
															<div class="datagrid-cell-c1-attrvalue"
																style="height: auto;">${attrs.attrValue}</div>
													</c:otherwise>
													
												</c:choose>
												
											</td>			
											</tr>
										</c:when>
										<c:otherwise>
											<tr class="datagrid-row">
												<td field="attrName">
													<div class="datagrid-cell datagrid-cell-c1-attrname"
														style="height: auto;">${attrs.attrName}</div>
												</td>
												<td field="attrValue"><c:choose>
														<c:when test="${attrs.attrName == 'COMMENTS' }">
															<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
																<c:if test="${!empty attrs.attrValue}">
																<a name="login" href=${attrs.attrValue } target="_blank">Click
																	here to view Comments</a>
																	</c:if>
															</div>
														</c:when>
														<c:when test="${attrs.attrName == 'ATTACHMENT' }">
															<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">
																<c:if test="${!empty attrs.attrValue}">
																<a name="login" href=${attrs.attrValue } target="_blank">Click
																	here to download Attachment</a>
																	</c:if>
															</div>
														</c:when>
														<c:otherwise>
															<div class="datagrid-cell datagrid-cell-c1-attrvalue"
																style="height: auto;">${attrs.attrValue}</div>
														</c:otherwise>
														
													</c:choose></td>
											</tr>
										</c:otherwise>
										</c:choose>
									</c:forEach>

								</tbody>
							</table>							
							<input type="hidden" name="itemid" value="${iboWorkOrderDTO.object_ID}"> 
							<input type="hidden" name="orderId" value="${iboWorkOrderDTO.sales_ORDER_ID}">
							<input type="hidden" name="serviceOrderId" value="${iboWorkOrderDTO.service_ORDER_ID}">
							<input type="hidden" name="orderStatus" value="${orderStatus}">
							<input type="hidden" name="saveFlag">						
							</form>
						</div>

						<style type="text/css" easyui="true">
							.datagrid-cell-c1-attrname {
								width: 350px
							}
							
							.datagrid-cell-c1-attrvalue {
								width: 330px;
								word-break: break-all;
								word-wrap: break-word; 
							}
						</style>

					</div>
				</div>
			</c:if>
			<!-- Table End -->
		</div>

		<!-- Activity detail review -->
		<div title="Activity" style="padding: 10px;">
			<div id="tabs" data-options="fit : true"></div>
			
			<!-- Table Start -->
			<c:if
				test="${iboActivityDTOList != null || fn:length(iboActivityDTOList) > 0}">
				<div class="panel datagrid" style="width: 700px;">


					<div class="panel-header">
						<div class="panel-title">Activity List</div>
					</div>


					<div class="datagrid-wrap panel-body">
						<table class="datagrid-header"
							style="height: 25px; border-color: #95b8e7;" cellspacing="0"
							cellpadding="0">
							<tbody>
								<tr class="datagrid-header-row">

									<td rowspan="1" colspan="1" field="ACTIVITY_ID">
										<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_ID">
											<span>ACTIVITY_ID</span>
										</div>
									</td>
									<td rowspan="1" colspan="1" field="ACTIVITY_NAME">
										<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_NAME">
											<span>ACTIVITY_NAME</span>
										</div>
									</td>
									<td rowspan="1" colspan="1" field="ACTIVITY_STATUS">
										<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_STATUS">
											<span>ACTIVITY_STATUS</span>
										</div>
									</td>
									<td rowspan="1" colspan="1" field="ACTIVITY_ENDDATE">
										<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_ENDDATE">
											<span>ACTIVITY_ENDDATE</span>
										</div>
									</td>
								</tr>

							</tbody>
						</table>
						<table class="datagrid-body" cellspacing="0" cellpadding="0">

							<tbody>

								<c:forEach var="attrs" items="${iboActivityDTOList}">
									<tr class="datagrid-row" class="datagrid-row">
										<td field="ACTIVITY_ID">
											<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_ID"
												style="height: "auto;">${attrs.activity_ID}</div>
										</td>
										<td field="ACTIVITY_NAME">
											<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_NAME"
												style="height: "auto;">${attrs.activity_NAME}</div>
										</td>
										<td field="ACTIVITY_STATUS">
											<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_STATUS"
												style="height: "auto;">${attrs.activity_STATUS}</div>
										</td>
										<td field="ACTIVITY_ENDDATE">
											<div class="datagrid-cell datagrid-cell-c1-ACTIVITY_ENDDATE"
												style="height: "auto;">${attrs.activity_ENDDATE}</div>
										</td>
									</tr>
								</c:forEach>

							</tbody>
						</table>
					</div>

					<style type="text/css" easyui="true">
						.datagrid-cell-c1-ACTIVITY_ID {
							width: 100px
						}
						
						.datagrid-cell-c1-ACTIVITY_NAME {
							width: 300px
						}
						
						.datagrid-cell-c1-ACTIVITY_STATUS {
							width: 120px
						}
						
						.datagrid-cell-c1-ACTIVITY_ENDDATE {
							width: 150px
						}
						
						.datagrid-cell-c1-ACTIVITY_WORK_QUEUE {
							width: 150px
						}
					</style>

				</div>
			</c:if>
			<!-- Table End -->
		</div>

</body>
</html>


